<template>
	<div class="chat">
		<!-- 好友列表 -->
		<div class="list">
			<span class="title">最近联系</span>
			<div class="user-list">
				<!-- 没有联系人的提示内容 -->
				<NoContent :show="false" text="暂无联系人"/>
				<!-- 联系人列表 -->
				<a class="data active"><img src="../assets/images/user.jpg" /><em>~飘雪</em></a>
				<a class="data"><img src="../assets/images/book.png" /><em>孤独的狼</em><b class="dot"></b></a>
				<a class="data"><img src="../assets/images/avi.svg" /><em>小羊</em><b class="dot"></b></a>
				<a class="data"><img src="../assets/images/user.jpg" /><em>请跟我走</em></a>
				<a class="data"><img src="../assets/images/user.jpg" /><em>我的网名有点长</em></a>
			</div>
		</div>
		<!-- 聊天窗口 -->
		<div class="content">
			<!-- 没有选择联系人的情况下，默认显示的效果 -->
			<NoContent :show="false" text="选择联系人"/>
			
			<div class="header clearfix">
				<span>与<b>~飘雪</b>的对话</span>
				<a class="btn">加入黑名单</a>
			</div>
			<!-- 显示聊天内容 -->
			<section class="msg">
				<!-- 聊天内容， 没有聊天内容的时候，提示  开始聊天 -->
				<NoContent :show="false" :img="false" text="无聊天内容，开始聊天"/>
				
				<div class="clearfix">
					<div class="f">
						<div class="info">
							<img src="../assets/images/user.jpg" />
							<time>2022-08-13 18:43:22</time>
						</div>
						<div class="text">您的这本书可以免费发我一份吗？您的这本书可以免费发我一份吗？您的这本书可以免费发我一份吗？</div>
					</div>
				</div>
				
				<div class="clearfix">
					<div class="t">
						<div class="info">
							<img src="../assets/images/chat.gif" />
							<time>2022-08-13 19:46:19</time>
						</div>
						<div class="text">可以，你可以加我的QQ,备注:需要电子书哟</div>
					</div>
				</div>
				
				<div class="clearfix">
					<div class="t">
						<div class="info">
							<img src="../assets/images/chat.gif" />
							<time>2022-08-13 19:46:19</time>
						</div>
						<div class="text">472759903</div>
					</div>
				</div>
				
				<div class="clearfix">
					<div class="t">
						<div class="info">
							<img src="../assets/images/chat.gif" />
							<time>2022-08-13 19:46:19</time>
						</div>
						<div class="text">472759903</div>
					</div>
				</div>
				
				<div class="clearfix">
					<div class="t">
						<div class="info">
							<img src="../assets/images/chat.gif" />
							<time>2022-08-13 19:46:19</time>
						</div>
						<div class="text">472759903</div>
					</div>
				</div>
				
				<div class="clearfix">
					<div class="f">
						<div class="info">
							<img src="../assets/images/user.jpg" />
							<time>2022-08-13 18:48:48</time>
						</div>
						<div class="text">已加QQ,万分谢谢</div>
					</div>
				</div>
				<div class="clearfix">
					<div class="f">
						<div class="info">
							<img src="../assets/images/user.jpg" />
							<time>2022-08-13 18:48:48</time>
						</div>
						<div class="text">可以，你可以加我的QQ,备注:需要电子书哟</div>
					</div>
				</div>
				<div class="clearfix">
					<div class="f">
						<div class="info">
							<img src="../assets/images/user.jpg" />
							<time>2022-08-13 18:48:48</time>
						</div>
						<div class="text">可以，你可以加我的QQ,备注:需要电子书哟</div>
					</div>
				</div>
				
			</section>
			<!-- 显示 发送按钮 -->
			<footer>
				<textarea placeholder="请输入聊天信息"></textarea>
				<a class="btn">发送消息</a>
			</footer>
		</div>
		
	</div>
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";
import NoContent from "../components/NoContent.vue";

export default {
	components: {
		HeaderNav, 
		Footer, 
		NoContent, 
	},
	mounted() {
		// 聊天窗口的滚动条出现到底部
		this.scrollToBottom();
	},
	methods: {
		scrollToBottom() { 
			let screen = document.querySelector("section.msg") ;
			screen.scrollTop = screen.scrollHeight ;
		}
	}
}
</script>

<style>
body {
   overflow: hidden;
}
</style>